HTML and JavaScript changes for Multi-browser Support

This topic describes the changes required in HTML and JavaScript to ensure multi-browser support.

The HTML and JavaScript content types need to be modified to enable multi-browser support. This involves change in the way API are used in applications. The various changes required are as mentioned below.

Accessing HTML Elements in JavaScript

The following properties apply to a HTML element accessed through JavaScript, with the exception of the window JavaScript object.

Table 1. List of Properties

Standards Non-compliant Properties (Used in Quirks Mode)

Standards Compliant Properties (Used in Transitional Mode)

document
Syntax

var documentObject = htmlElement.document;

ownerDocument
Syntax

var documentObject = htmlElement.ownerDocument;

parentWindow
Syntax

var documentObject = htmlElement.document.parentWindow;

defaultView
Syntax

var documentObject = htmlElement.ownerDocument.defaultView;

parentElement
Syntax

while (element != null) { element = element.parentElement; }

parentNode
Syntax

while (element != null && element.nodeType != 9) { element = element.parentElement; }

The additional check on nodeType ensures document root is not included while searching

children
Syntax

var childNodes = htmlElement.children;

childNodes
Syntax

var childNodes = htmlElement.childNodes;

outerHTML
Syntax

var outerHTML = htmlElement.outerHTML;

This has no equivalents, although one possibility could be to use innerHTML of the parent, though the solution may not return same results. For example,

Var outerHTML = htmlElement.parentNode.innerHTML;

Accessing HTML elements in JavaScript

The following events apply to HTML elements accessed through JavaScript.

Table 2. List of JavaScript Events

Standards Non-compliant Events (Used in Quirks Mode)

Standards Compliant Events (Used in Transitional Mode)

onselectevent is used on the application.
Syntax

<html onselect="onSelectApplication()" ...

Or

application.addListener("onselect", handler);

onapplicationselect event is now used on the application.
Syntax

<html onapplicationselect="onSelectApplication()" ...

Or

application.addListener("onapplicationselect", handler);

Accessing Custom HTML Properties in JavaScript

In HTM content, it is possible to set custom properties for an HTML object and access them in JavaScript. While the properties can be set as before, for enabling multi-browser support, they must be read using the getAttribute() method.
Consider the following example,

<input1 id="input1" customproperty="customvalue" ...

Earlier, in Quirks Mode, the properties were viewed as,

var customvalue = input1.customproperty;

In the Transitional Mode, the properties must be viewed as below to ensure multi-browser support,

var customvalue = document.getElementById("input1").getAttribute("customproperty");

This can be set when the properties are read from the HTML control for the first time, as follows.

var input1 = document.getElementById("input1"); if (undefined === input1.customproperty) input1.customproperty == input1.getAttribute("customproperty");

Using the "===" operator ensures the data checked is NULL instead of FALSE.

Using Standard JavaScript Methods

The usage of the following standard JavaScript methods must be modified as mentioned below.

Table 3. List of JavaScript Methods

Standards Non-compliant Methods (Used in Quirks Mode)

Standards Compliant Methods (Used in Transitional Mode)

create() method for an HTML element: The parameter can be an HTML markup.
Syntax

var html = window.document.createElement("<div style='display:inline'>");

create() method for an HTML element: The parameter can only be the tag name, following which the other properties must be set programmatically.
Syntax

var html = window.document.createElement("div"); html.style.display = "inline";

create() method for the IFrame control: The width and height need not be specified.
Syntax

var iframe = window.document.createElement("<iframe>");

create() method for the IFrame control: The width and height must be specified.
Syntax

var iframe = window.document.createElement("iframe"); iframe.style.width = "100%"; iframe.style.height = "100%";

insertBefore() method: The second parameter is optional. If not set, the behavior of the control is similar to the appendChild() method.
Syntax

document.body.insertBefore(newChild);

insertBefore() method: The second parameter is not optional. Set to null, if not used.
Syntax

document.body.insertBefore(newChild, null);

HTML controls: It was possible to access all HTML controls in a Web application using the window["id"] collection.
Syntax

htmlControl1.style.display = "none";

HTML controls: Controls on a Web application can only be accessed using the getElementById("id") method.
Syntax

var htmlControl1 = document.getElementById("htmlControl1"); htmlControl1.style.display = "none";

.allcollection: it returns an array of HTML controls referred by ID or name.
Syntax

var html1collection = document.all["html1"]; var html2collection = htmlControl1.all["html2"];

No equivalent available for this method for browsers. It is possible to use the getElementById("") method to return a single HTML control.
Syntax

var html1 = document.getElementById("html1");

Note: Process Platform provides an API that is an equivalent of the element.all["id"] method and is used as shown below:

var html2 = cordys.getElementById("html1");

Retrieving data from a collection: Standard methods that use parentheses - "(" and ")" - are used.
Syntax:

var row = sampleTable.rows("row1"); var child = xmlObject.childNodes(2);

retrieving data from a collection: Square brackets - [ ] - must be used.
Syntax:

var row = sampleTable.rows["row1"]; var child = xmlObject.childNodes[2];

eval() method: Is used as below to evaluate specified expression.
Syntax:

var newObject = oldObject.cloneNode(true);

cloneNode() method: Once used, copies all function pointers and custom attributes on the cloned object.
Syntax:

var newObject = oldObject.cloneNode(true); newObject.property = oldObject.property; ...

pp108 : HTML and JavaScript changes for Multi-browser Support